<template>
  <div class="login">
    <div class="info">
      <div class="icon">
        <el-icon :size="60" color="#fff"><User /></el-icon>
      </div>
      <div class="username">{{ loginStore.username }}</div>
      <el-input
        v-model="password"
        placeholder="请输入密码"
        show-password
        type="password"
        @keyup.enter.native="login"
      >
        <template #append>
          <el-button @click="login" type="primary"
            ><el-icon color="#fff"><Right /></el-icon
          ></el-button>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { User, Right } from '@element-plus/icons-vue'
import { useLoginStore } from '@/store/login'

const loginStore = useLoginStore()
const password = ref('123456')

const login = () => {
  loginStore.loginAction(password.value)
}
</script>

<style scoped lang="less">
.login {
  width: 100%;
  min-height: 100%;
  .info {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    text-align: center;
    .icon {
      text-align: center;
      border-radius: 100px;
      display: inline-block;
      padding: 20px;
      width: 100px;
      height: 100px;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 0.3);
      &:hover {
        cursor: pointer;
        box-shadow: 20px;
        backdrop-filter: blur(15px);
      }
    }
    .username {
      margin: 10px 0;
      font-size: 26px;
      color: #fff;
    }
  }
}

:deep(.el-input__wrapper) {
  background: rgba(#000, 0.1);
  position: relative;
  left: 1px;
}
:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #fff inset;
}
:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #eee inset;
}
:deep(.el-input__inner) {
  color: #fff;
}
:deep(.el-input-group__append button.el-button) {
  border-color: #fff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #409eff;
  color: #fff;
}
</style>
